import Vue from "vue";
import VueRouter from "vue-router";

// 异步引入组件：使用的时候在引入组件而不是同步一次加载所有组件
const Home = () => import("@/views/Home.vue");
const About = () => import("@/views/About.vue");
const Demon1 = () => import("@/views/Demon1.vue");
const Demon2 = () => import("@/views/Demon2.vue");
const Demon3 = () => import("@/views/Demon3.vue");
const Demon4 = () => import("@/views/Demon4.vue");
const Demon5 = () => import("@/views/Demon5.vue");
const Demon6 = () => import("@/views/Demon6.vue");
const Demon7 = () => import("@/views/Demon7.vue");
const Demon8 = () => import("@/views/Demon8.vue");
const Demon9 = () => import("@/views/Demon9.vue");
const Demon10 = () => import("@/views/Demon10.vue");
const Demon11 = () => import("@/views/Demon11.vue");
const Demon12 = () => import("@/views/Demon12.vue");
const Demon13 = () => import("@/views/Demon13.vue");
const Demon14 = () => import("@/views/Demon14.vue");
const Detail = () => import("@/views/Detail.vue");
const Copyright = () => import("@/views/Copyright.vue");
const Demon15 = () => import("@/views/Demon15.vue");
const Demon16 = () => import("@/views/Demon16.vue");
const NotFound = () => import("@/views/NotFound.vue");

Vue.use(VueRouter);

const routes = [
  {
    // 页面地址
    path: "/",
    name: "Home",
    // 页面指向那个组件
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  },
  {
    path: "/demon1",
    name: "Demon1",
    component: Demon1,
  },
  {
    path: "/demon2",
    name: "Demon2",
    component: Demon2,
  },
  {
    path: "/demon3",
    name: "Demon3",
    component: Demon3,
  },
  {
    path: "/demon4",
    name: "Demon4",
    component: Demon4,
  },
  {
    path: "/demon5",
    name: "Demon5",
    component: Demon5,
  },
  {
    path: "/Demon6",
    name: "Demon6",
    component: Demon6,
  },
  {
    path: "/Demon7",
    name: "Demon7",
    component: Demon7,
  },
  {
    path: "/Demon8",
    name: "Demon8",
    component: Demon8,
  },
  {
    path: "/Demon9",
    name: "Demon9",
    component: Demon9,
  },
  {
    path: "/Demon10",
    name: "Demon10",
    component: Demon10,
  },
  {
    path: "/Demon11",
    name: "Demon11",
    component: Demon11,
  },
  {
    path: "/Demon12",
    name: "Demon12",
    component: Demon12,
  },
  {
    // 动态路由：可以动态匹配多个
    // 动态参数param的key值为id（参数名为id）
    // 如访问：http://localhost:8080/demon/Demon13/11
    // 则路由携带参数param.id = 11
    //path: "/Demon13/:id(\\d+)?/:type",  // 正则：参数必须全部是数字且可以传递多个参数
    path: "/Demon13/:id",
    name: "Demon13",
    component: Demon13,
    // 路由的元数据信息在route中可以获取到
    // 可以根据meta信息做个性化判断或定制
    meta: {
      title: "abc",
    },
  },
  {
    path: "/Demon14/:id",
    name: "Demon14",
    component: Demon14,
    meta: {
      show: true,
    },
    // 局部路由钩子函数,注意与全局钩子函数名称beforeEach的区别
    beforeEnter(to, from, next) {
      console.log("****局部钩子函数,即将进入Demon14");
      next();
    },
    // 访问about直接重定向到Demon6
    //redirect: "Demon6",
    // 访问别名同等于About
    //alias: "Demon666",
    // 子路由
    children: [
      {
        // path不需要写斜杠
        // 在Demon14中增加一个router-view
        // 也可以动态路由:  path: ":detail"
        path: "detail",
        name: "detail",
        component: Detail,
      },
      {
        path: "copyright",
        name: "copyright",
        component: Copyright,
      },
    ],
  },
  {
    path: "/Demon15",
    name: "Demon15",
    component: Demon15,
  },
  {
    path: "/Demon16",
    name: "Demon16",
    component: Demon16,
  },
  {
    // 匹配不到时默认404页面
    path: "*",
    name: "NotFound",
    component: NotFound,
  },
];

const router = new VueRouter({
  // 路由模式: 使用什么方式切换路由和页面
  // history模式: 斜杠 + 路径名 - 采用h5的history模式切换
  // hash模式：切换的时候以hash,基本目录会携带一个"井号+/"
  mode: "history",
  // 项目基础路径,http://localhost:8080/基路径名
  base: "/demon",
  // 路由列表
  routes,
});

// 全局路由钩子函数：路由跳转前的钩子函数
// to：即将要跳转的路由
// from: 前一个路由
// next: 必须执行next方法，才能跳转路由
// 执行next(),跳转到to对应的路由
// 执行next(false)不跳转停留在当前页面
// 执行next(xxx)跳转到xxx页面
router.beforeEach((to, from, next) => {
  console.log("即将从页面:" + from.path + " 进入到新页面:" + to.path);
  if (to.name === "Demon6") {
    next("Demon5");
  } else {
    next();
  }
});

router.afterEach((to, from) => {
  console.log("从页面:" + from.path + " 进入到了页面:" + to.path);
  from;
  to;
});

export default router;
